<template>
    <div class="biyao-recommend">
        <a class="header">{{ recommend.header }}
            <span>></span>
        </a>
        <a class="banner" :style="'background-image: url(' + recommend.banner + ');'"></a>
        <div class="products">
            <a class="product" v-for="product in recommend.products" @tap.stop.prevent="openPage('/views/product.html?isBiYao=true&id=' + product.id)">
                <div class="thumb" :style="'background-image: url(' + webApiDomain + '/public/uploads/' + product.file.savepath + product.file.savename + ');'"></div>
                <div class="title">{{ product.name }}</div>
                <div v-if="product.full_score_buy === 0" class="price">￥{{ ( product.old_price / 100 ).toFixed( 0 ) }}
                    <span class="score">+ {{ ( product.discount_price / 100 * 10 ).toFixed( 0 ) }}积分</span>
                </div>
                <div v-else class="score">{{ ( product.discount_price / 100 * 10 ).toFixed( 0 ) }}积分</div>
            </a>
        </div>
    </div>
</template>
<script>
import { apiDomain } from 'assets/js/Lib';

export default {
    data() {
        return {

        };
    },
    computed: {
        webApiDomain: function () {
            return apiDomain;
        }
    },
    props: {
        recommend: {
            type: Object,
            default: {}
        }
    },
    methods: {
        openPage: function (url) {
            let pageConfig = {
                "id": url,
                "url": url,
                show: {
                    autoShow: true
                },
                waiting: {
                    title: '加载中...'
                }
            }
            if (!url) {
                pageConfig.id = "building"
                pageConfig.url = "building.html"
            }

            mui.openWindow(pageConfig)
        }
    }
};
</script>
<style lang="less">
.biyao-recommend {
    margin: .3rem 0;
    box-shadow: 1px 1px 5px rgba(7, 0, 2, .2);
    background: #fff;
    min-height: 1rem;
    .header {
        height: 1.25rem;
        line-height: 1.25rem;
        display: block;
        text-decoration: none;
        color: #333;
        font-size: .3rem;
        text-align: center;
        span {
            color: #adabab;
            margin-left: .1rem;
            font-size: 1.3em;
        }
    }
    .banner {
        display: block;
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        height: 4.1rem;
    }
    .products {
        .product {
            padding-bottom: .375rem;
            width: 33.3%;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            color: #333;
            font-size: .3rem;
            .thumb {
                background-size: cover;
                background-position: top center;
                background-repeat: no-repeat;
                height: 3rem;
            }
            .title {
                padding: 0 5px;
                height: .55rem;
                line-height: .55rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .score {
                color: #333;
                height: .55rem;
                line-height: .55rem;
            }
            .addicon {
                .mui-icon {
                    font-size: .375rem;
                }

                margin: -.1rem 0;
                color: #333;
                opacity: .5;
            }
            .price {
                color: #f33;
                height: .55rem;
                line-height: .55rem;
            }
        }
    }
}
</style>
